<template>
  <div class="home">
    <p>数值:{{ count }}</p>
    <button @click="count++">count++</button>
    <p>对象:{{ obj.username }}</p>
    <button @click="obj.username = '小张'">obj的改变</button>
    <p>对象复杂数据类型:{{ obj.school.sname }}</p>
    <button @click="obj.school.sname = '清华大学'">obj的school改变</button>

  </div>
</template>

<!-- setup新写法 -->
<script setup>
import { ref, watch, reactive } from 'vue'
let count = ref(0);
// 1.侦听基本数据类型
// 第一个参数: 侦听的对象,
// 侦听后的结果
watch(count, (count, prevCount) => {
  console.log('count改变了');
  console.log(count);
  console.log(prevCount);
})
// 2.侦听对象数据类型
let obj = reactive({
  username: '小李',
  age: 18,
  school: {
    sname: '好谷'
  }
})
// watch(obj, (obj) => {
//   console.log('obj改变了');
//   console.log(obj);
// })
// 3.使用 `watch` 监听响应式对象数据中的一个属性(基本)
watch(() => obj.username, (username, prevUsername) => {
  console.log('obj改变了');
  console.log(username);
  console.log(prevUsername);
})
// 4.使用 `watch` 监听响应式对象数据中的一个属性(复杂)，配置深度监听
watch(() => obj.school, (newValue, oldValue) => {
  console.log('obj改变了');
  console.log(newValue);
  console.log(oldValue);
}, {
  deep: true,
  immediate: true
})

</script>
